<template>
    <div class="header">
        <div class="header-fixed" v-show="!showAbs">
            <router-link to="/">
                <div class="header-left">
                    <div class="iconfont back-icon">&#xe602;</div>
                </div>
            </router-link>
            <div class="header-tittle">景点详情</div>
        </div>
    </div>
</template>

<script>
    // export default{
    //     name:"DetailHeader",
    //     data (){
    //         return {
    //             showAbs: true
    //         }
    //     },
    //     methods: {
    //         handleScroll (){
    //             const top = document.documentElement.scrollTop
    //             if(top>60){
    //                 this.showAbs = true
    //             }else{
    //                 this.showAbs = false
    //             }
    //             console.log(1111)
    //         }
    //     },
    //     activated(){
    //         console.log(222)
    //        window.addEventListener('scroll',this.handleScroll)
    //     }
    // }
   export default{
       name:"DetailHeader",
       data (){
           return {
               showAbs:true
           }
       }
   } 
</script>

<style lang="stylus" scoped>
.header-fixed
    position fixed
    top 0
    left 0
    width 100%
    line-height 0.8rem
    text-align center
    background-color #00bcd4
    color #fff
    .header-left
        position absolute
        top 0
        left 0
        line-height 0.8rem
        .back-icon
            font-size 0.5rem
            color #fff
    .header-tittle
        line-height 0.8rem
        font-size 0.32rem    
</style>

